<!doctype html>
<html>
<head>
<meta charset="utf-8">
<TITLE>论坛--看贴</TITLE>
<Link rel="stylesheet" type="text/css" href="style/style.css" />
</HEAD>

<BODY>

<div id="app">

<DIV>
	<IMG src="image/logo.gif">
</DIV>

	<!--      用户信息、登录、注册        -->
	<DIV class="h" id="logindiv">
	<span v-if="loginStatus == 1">
		<input type="hidden" value="yes" />
		欢迎您 <a href="#">{{userInfo.uname}}</a>
		<a href="javascript:void(0)" @click="signout()">退出</a>
	</span>
	<span v-if="loginStatus == 0">
		<input type="hidden" value="no" />
		您尚未&nbsp;<a href="login.html">登录</a>
		&nbsp;|&nbsp;<A href="reg.html">注册</A> |
	</span>
	</DIV>

<!--      主体        -->
<DIV><br/>
	<!--      导航        -->
<DIV>
	&gt;&gt;<B><a href="index.html">论坛首页</a></B>&gt;&gt;
	<B><a href="javascript:void(0);" @click="openListHtml(boardInfo.boardid, boardInfo.boardname)">{{boardInfo.boardname}}</a></B>
</DIV>
	<br/>
	<!--      回复、新帖        -->
	<DIV>
		<span v-if="loginStatus == 1">
			<A href="javascript:void(0);" @click="postReply()"><IMG src="image/reply.gif" border="0" id=td_reply></A>
			<A href="javascript:void(0);" @click="post()"><IMG src="image/post.gif" border="0" id=td_post></A>
		</span>

	</DIV>
	<!-- 翻 页 -->
	<DIV style="background-color: #ffffff; color:#ff0000;">
		<a href="javascript:void(0)"  @click.prevent="clickPage(1)">第一页</a>
		<a href="javascript:void(0)"  @click.prevent="clickPage( pagebean.pre)"  :page-data="pagebean.pre">上一页</a>
		<a href="javascript:void(0)"  @click.prevent="clickPage( pagebean.next)" :page-data="pagebean.next">下一页</a>
		<a href="javascript:void(0)"  @click.prevent="clickPage( pagebean.totalpages)" :page-data="pagebean.totalpages">最后一页</a>
		总共{{pagebean.total}}记录/共分{{pagebean.totalpages}}页，
		每页{{pagebean.pagesize}}条，当前第{{pagebean.pageno}}页
	</DIV>

	<!--      本页主题的标题        -->
	<DIV>
		<TABLE cellSpacing="0" cellPadding="0" width="100%">
			<TR>
				<TH class="h">本页主题: {{topicInfo.title}}</TH>
			</TR>
			<TR class="tr2">
				<TD>&nbsp;</TD>
			</TR>
		</TABLE>
	</DIV>
	
	<!--      主题        -->
	<DIV class="t">
		<TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed" cellSpacing="0" cellPadding="0" width="100%">
			<TR class="tr1">
				<TH style="width: 20%">
					<B>{{topicInfo.uname}}</B><BR/>
					<img :src=`image/head/${topicInfo.head}` /><BR/>
					注册:{{topicInfo.regtime}}<BR/>
				</TH>
				<TH>
					<H4>{{topicInfo.title}}</H4>
					<DIV>{{topicInfo.content}}</DIV>
					<DIV class="tipad gray">
						发表：[{{topicInfo.publishtime}}] &nbsp;
						最后修改:[{{topicInfo.modifytime}}] &nbsp;
						浏览数:[{{topicInfo.lookNum}}]
						点赞数:[{{topicInfo.zanNum}}]
<!--						点赞数:[<span v-model="topicInfo.zanNum"></span>]-->
						收藏数:[{{topicInfo.collectNum}}]
						<span v-if="userInfo.uid == topicInfo.uid">
<!--							<span v-if="replyData.length <= 0">-->
<!--							</span>-->
							[<A href="javascript:void(0);" @click="zanTopic(zan, topicInfo.topicid)">点赞</A>]
							[<A href="javascript:void(0);" @click="zanTopic(collect, topicInfo.topicid)">收藏</A>]
							<span v-if="replyData.length <= 0">
								[<A href="javascript:void(0);" @click="deleteTopic( topicInfo.topicid)">删除</A>]
							</span>
							[<A href="javascript:void(0);" @click="updateTopic()">修改</A>]
						</span>
					</DIV>
				</TH>
			</TR>
		</TABLE>
	</DIV>
	
	<!--      回复        -->
	<DIV class="t">
		<TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed" cellSpacing="0" cellPadding="0" width="100%">

			<TR class="tr1" v-for="(item,index) in replyData">
				<TH style="width: 20%">
					<B>{{item.uname}}</B><BR/>
					<img :src=`image/head/${item.head}` /><BR/>
					注册:{{item.regtime}}<BR/>
				</TH>
				<TH>
					<H4>{{item.title}}</H4>
					<DIV>{{item.content}}</DIV>
					<DIV class="tipad gray">
						发表：[{{item.publishtime}}] &nbsp;
						最后修改:[{{item.modifytime}}]
						点赞数:[{{item.num}}]
						<span v-if="userInfo.uid == item.uid">
							[<A href="javascript:void(0);" @click="zanReply(zan, item.replyid)">点赞</A>]
							[<A href="javascript:void(0);" @click="deleteReply( item.replyid)">删除</A>]
							[<A href="javascript:void(0);" @click="updateReply( item)">修改</A>]
						</span>
					</DIV>
				</TH>
			</TR>
		</TABLE>
	</DIV>
	

</DIV>

<!--      声明        -->
<BR>
<CENTER class="gray">源辰信息</CENTER>

</div>

</BODY>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">

	// 使用axios时，利用原型模式给axios加入 Authorization头，这样每个请求会加入Authorization头部
	Vue.prototype.axios = axios;
	// 在每次请求时，前端携带token到请求头中
	axios.interceptors.request.use(config => {
		// 从localStorage 或 vuex 中获取 token
		const token = localStorage.getItem("token");
		// 如果有 token 就添加到请求头中
		if (token){
			config.headers.Authorization = token;
		} else {
			config.headers.Authorization = "";
		}
		console.log(token);
		console.log(config);
		return config;
	}, error => {
		return Promise.reject(error);
	});


	var detail_app = new Vue({
		el: "#app",
		data: {
			replyData: [], // 回复分页列表
			loginStatus: 0, // 登陆状态
			userInfo: {}, // 用户信息
			boardInfo: {}, // 板块信息
			topicInfo: {head: "0.gif"}, // 主题信息
			// lookNum: 0,
			zan: "zan",
			collect: "collect",
			// 分页用的是 model
			pagebean: {
				pageno: 1,
				pagesize: 2,
				sortby: "replyid",
				sort: "asc",
				total: 0,
				totalpages: 0,
				pre: 1,
				next: 1
			}
		},
		methods: {
			zanReply(type, replyid){
				let _this = this;
				if (_this.userInfo.uid == null){
					_this.userInfo.uid = 1;
				}
				// 点赞 type = zan
				// 浏览 type = look
				// 收藏 type = collect
				// 评论增加点赞
				let promise =
						axios.get("/bbs-count/count/zanReply?type=" + type +
								"&uid=" + _this.userInfo.uid +
								"&replyid=" + replyid +
								"&topicid=" + _this.topicInfo.topicid);

				promise.then( result => {
					for (let i=0; i<_this.replyData.size; i++){
						if (replyid === _this.replyData[i].replyid){
							_this.replyData[i].zanNum = result.data.num;
						}
					}
				});
			},
			zanTopic(type, topicid){
				let _this = this;

				// 点赞 type = zan
				// 浏览 type = look
				// 收藏 type = collect
				// 主题增加点赞/收藏
				let promise =
						axios.get("/bbs-count/count/zanTopic?type=" + type +
								"&uid=" + _this.userInfo.uid +
								"&topicid=" + topicid);

				promise.then( result => {
					if (type === "zan"){
						_this.topicInfo.zanNum = result.data.num;
					} else if (type === "collect"){
						_this.topicInfo.collectNum = result.data.num;
					}
				});
			},
			post(){
				// 确定 type=0，这代表这是一个发表话题
				sessionStorage.setItem("type", 0);
				window.open("post.html", "_self");
			},
			postReply(){
				// 确定 type=1，这代表这是一个回复
				sessionStorage.setItem("type", 1);
				window.open("post.html", "_self");
			},
			updateTopic(){
				// 确定 type=2，这代表这是一个修改主题
				sessionStorage.setItem("type", 2);
				sessionStorage.setItem("topicInfo", JSON.stringify(this.topicInfo));
				window.open("post.html", "_self");
			},
			updateReply(reply){
				// 确定 type=3，这代表这是一个修改评论
				sessionStorage.setItem("type", 3);
				sessionStorage.setItem("replyInfo", JSON.stringify(reply));
				window.open("post.html", "_self");
			},
			openListHtml(boardid, boardname){
				// sessionStorage：基于会话的Storage
				// JSON.stringify({json对象})  =>  将json对象转为字符串
				// 在另一个页面取的 boardInfo时候，取出的是字符串，要转化为json对象   =>  JSON.parse( json字符串) 得到json对象
				// sessionStorage.setItem(
				// 		"boardInfo",
				// 		JSON.stringify({"boardid": boardid, "boardname": boardname})
				// );
				// _self代表 在当前页面打开
				window.open("/bbs-web/list.html", "_self");
			},
			// 根据topicid查询topic详情
			showTopicDetail(){
				let _this = this; // 防止变量污染
				let ti = JSON.parse(sessionStorage.getItem("topicInfo"));
				_this.topicInfo = ti;


				let topicid = _this.topicInfo.topicid;
				let promise = axios.get("/bbs-board/topic/findTopicById?topicid=" + topicid);
				promise.then( result => {
					if (result.data.code == 1){
						_this.topicInfo = result.data.data;
						_this.topicInfo.lookNum = ti.lookNum;

						// TODO：点赞收藏数显示失真:
						// TODO：所有的点赞收藏数无法在用户点赞或收藏后变化
						let promise1 = axios.get("/bbs-count/count/getTopic?topicid=" + topicid +"&type=" + _this.zan);
						promise1.then( result => {
							_this.topicInfo.zanNum = result.data.num;
						});

						let promise2 = axios.get("/bbs-count/count/getTopic?topicid=" + topicid +"&type=" + _this.collect);
						promise2.then( result => {
							_this.topicInfo.collectNum = result.data.num;
						});
					}
				});
			},
			// 存数据 并查评论点赞数
			displayPage(data){
				// vue是一个MVVM模型     VM指的是view model

				let _this = this;
				// data 是一个对象，它下面有data属性，这个属性中的数据才是服务端回送的 json
				let result = data.data;
				if (result.code === 0){
					alert("暂无数据！");
					return;
				}

				//

				// 查出当前页评论的点赞数
				let replyids = [];
				let i = 0;
				for (let map in result.dataset){
					replyids[i] = result.dataset[map].replyid;
					i++;
				}

				if (replyids == null){
					_this.replyData = result.dataset;
					_this.pagebean = result;
				} else {

					let param = new URLSearchParams();
					param.append("replyids", replyids);
					param.append("topicid", _this.topicInfo.topicid);

					let promise = axios.post("/bbs-count/count/getReplyZans", param);
					promise.then( data => {
						_this.replyData = result.dataset;
						_this.pagebean = result;

						let map = data.data;
						for (let m in _this.replyData){
							let replyid = _this.replyData[m].replyid;
							_this.replyData[m].num = map[replyid];
						}
					});
				}
			},
			// 分页查询
			clickPage(pageno){
				var _this = this;
				_this.boardInfo = JSON.parse(sessionStorage.getItem("boardInfo"));
				_this.topicInfo = JSON.parse(sessionStorage.getItem("topicInfo"));
				// axios.get()/axios.post() 返回的是 Promise对象
				var promise =
						axios.get("/bbs-board/reply/findByPage?pageno=" + pageno +
								"&pagesize=" + _this.pagebean.pagesize +
								"&topicid=" + _this.topicInfo.topicid);

				promise.then( result => {
					_this.displayPage(result.data);
				});

				_this.showTopicDetail();
			},
			// 退出
			signout(){
				var _this = this;
				if (localStorage.getItem("token") == null){
					// 本地没有token，则说明用户没有登录
					_this.userInfo = {};
					_this.loginStatus = 0;
					return;
				}
				//
				axios.get("/bbs-security/user/signout").then(data => {
					_this.userInfo = {};
					_this.loginStatus = 0;
					localStorage.removeItem("token");
				});
			},
			// 判断用户是否登录
			isOnLine(){
				var _this = this;
				// 如果浏览器的storage中无token，则说明 没有用户登录
				if (localStorage.getItem("token") == null){
					_this.userInfo = {};
					_this.loginStatus = 0;
					return;
				}
				axios.get("/bbs-security/user/loginCheck").then(data=>{
					if (data.data.code === 0){
						_this.loginStatus = 0;
					} else {
						_this.loginStatus = 1;
						_this.userInfo = data.data.data;
					}
				});
			},
			// 删除主贴
			deleteTopic(topicid){
				var _this = this;
				var promise = axios.get("/bbs-board/topic/deleteTopicById?topicid=" + topicid);
				promise.then( result => {
					if (result.data.code === 1){
						// 删除成功后，到此板块对应的 list.html页面
						window.open("list.html", "_self");
					}
				});
			},
			// 删除回复
			deleteReply(replyid){
				var _this = this;
				var promise = axios.get("/bbs-board/reply/deleteReplyById?replyid=" + replyid);
				promise.then( result => {
					if (result.data.code === 1){
						// 删除成功后，刷新detail.html页面
						alert("删除成功，删除回复成功！");
						window.open("detail.html", "_self");
					}
				});
			},
		},

		// 页面的挂载
		mounted:function (){
			// 组合多个请求
			axios.all( [this.showTopicDetail(), this.clickPage(1), this.isOnLine()] ).then(axios.spread(function (d1, d2){
			}));
		}
	});
</script>

</HTML>